<template>
  <div class="page refund">
    <div class="scroll-view">
      <customHeader middleTitle="退款" />
      <div class="page-body">
        <ul class="form-style">
          <li>
            <span>是否分账</span>
            <div v-if="param.extension31 == '0'">否</div>
            <div v-else-if="param.extension31 == '1'">是</div>
          </li>
          <li>
            <span class="required">订单金额</span>
            <div v-if="param.totalAmount">￥{{param.totalAmount}}</div>
            <div v-else></div>
          </li>
          <li>
            <span class="required">退款方式</span>
            <div v-if="param.payType ==1">
              现金
            </div>
            <div v-else-if="param.payType == 2">
              支付宝
            </div>
            <div v-else-if="param.payType == 3">
              会员卡
            </div>
            <div v-else-if="param.payType == 4">
              POS刷卡
            </div>
            <div v-else-if="param.payType == 5">
              微信
            </div>
            <div v-else-if="param.payType == 7">
              云闪付
            </div>
          </li>
        </ul>
        <ul class="form-style">
          <li>
            <inputClear type="number"
                        warpClass="refund-change-input"
                        v-model="refundMoney"
                        @input="handleInput"
                        :limitVal="limitVal"
                        placeholder="请填写退款金额" />
          </li>
          <li>
            <inputClear type="password"
                        warpClass="refund-change-input"
                        v-model="inputPwd"
                        @input="handleInput"
                        placeholder="请填写登录密码" />
          </li>
          <li>
            <inputClear type="text"
                        warpClass="refund-change-input"
                        v-model="refundReason"
                        @input="handleInput"
                        placeholder="请填写退款原因（选填）" />
          </li>
        </ul>
        <div class="btn-wrap">
          <div :class="canSubmit?'btn':'btn disabled'"
               @click="submitRequest">确定退款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import jsBridge from "../../tools/jsBridge.js";
import { Toast,MessageBox } from "mint-ui";
export default {
  name: "refund",
  data() {
    return {
      param: {},
      refundMoney: "",
      inputPwd: "",
      refundReason: "",
      canSubmit: false,
      isLoadding:false
    };
  },
  methods: {
    limitVal(v) {
      if (Number(v) > Number(this.param.totalAmount)) {
        Toast("输入金额不能大于订单金额");
        return "";
      } if (v.indexOf(".")>-1&&v.split(".")[1].length>2) {//最多输入两位小数
        let t=v.substring(0,v.length-1);
        return t;
      } else {
        return v;
      }
    },
    //校验
    handleInput() {
      if (this.refundMoney !== "" && this.inputPwd.length >= 6&&Number(this.refundMoney)>0&&/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/.test(this.refundMoney)) {
        this.canSubmit = true;
      } else {
        this.canSubmit = false;
      }
    },
    refundSuccess() {
      jsBridge.updateNativePage({page:"orderPage"})
      this.$router.push({
        path: "/orderDetails/refund/refundSuccess",
        query: {
          payType: this.param.payType,
          refundMoney: this.refundMoney,
          orderId: this.param.orderId,
          orderType:this.param.orderType,
        }
      });
    },
    submitRequest() {
      if (this.isLoadding||!this.canSubmit) {
        return;
      }
      this.isLoadding = true;
      const param = {
        refundMoney: this.refundMoney,
        inputPwd: this.inputPwd,
        refundReason: this.refundReason,
        orderId: this.param.orderId,
        shopId: this.param.shopId
      };
      this.ajax({
        type: "post",
        data: param,
        url: "newapp/order/appRefundOrder.do",
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            let tip =  res.resultObject ? (res.resultObject.tip||'') : '';
            if(tip) {
              MessageBox({
                title: "",
                message: tip,
                showCancelButton: false,
                confirmButtonText: "知道了",
                closeOnClickModal: false
              }).then(action => {
                this.refundSuccess();
              });
            }else {
              this.refundSuccess();
            }
            /* jsBridge.updateNativePage({page:"orderPage"})
            this.$router.push({
              path: "/orderDetails/refund/refundSuccess",
              query: {
                payType: this.param.payType,
                refundMoney: this.refundMoney,
                orderId: this.param.orderId,
                orderType:this.param.orderType,
              }
            }); */
          } else {
            this.$router.push({
              path: "/orderDetails/refund/refundFail",
              query: {
                payType: this.param.payType,
                refundMoney: this.refundMoney,
                msg:res.msg
              }
            });
          }
          this.isLoadding = false;
        })
        .catch(error => {
          this.isLoadding = false;
        });
    }
  },
  components: {
    customHeader,
    inputClear
  },
  created() {
    this.param = this.$route.query;
  }
};
</script>
<style lang='scss' scoped>
@import "orderDetails";
</style>
<style>
.refund-change-input {
  text-align: left !important;
}
</style>
